<template>
  <div class="color-picker-panel" :class="{ 'has-border': border, 'is-disabled': disabled }">
    <!-- 主调色板区域 -->
    <div class="color-picker-main">
      <!-- 色板和饱和度/亮度选择区域 -->
      <div
        class="color-palette"
        ref="paletteRef"
        :class="{ 'is-disabled': disabled }"
        @mousedown="handlePaletteMouseDown"
        :style="{
          background: `linear-gradient(to bottom, transparent, #000), linear-gradient(to right, #fff, hsl(${hsv.h}, 100%, 50%))`,
          cursor: disabled ? 'not-allowed' : 'crosshair',
        }"
      >
        <!-- 选择器指示器 -->
        <div
          class="color-picker-pointer"
          :style="{
            left: `${saturation * 100}%`,
            top: `${(1 - brightness) * 100}%`,
          }"
        ></div>
      </div>

      <!-- 右侧色相条 -->
      <div
        class="color-hue"
        ref="hueRef"
        :class="{ 'is-disabled': disabled }"
        @mousedown="handleHueMouseDown"
        :style="{
          cursor: disabled ? 'not-allowed' : 'pointer',
        }"
      >
        <div
          class="hue-pointer"
          :style="{
            top: `${(hsv.h / 360) * 100}%`,
          }"
        ></div>
      </div>
    </div>

    <!-- Alpha 滑块（水平方向） -->
    <div
      v-if="showAlpha"
      class="color-alpha-slider"
      :class="{ 'is-disabled': disabled }"
    >
      <div
        class="color-alpha-horizontal"
        ref="alphaRef"
        :class="{ 'is-disabled': disabled }"
        @mousedown="handleAlphaMouseDown"
        :style="{
          cursor: disabled ? 'not-allowed' : 'pointer',
          backgroundImage: `linear-gradient(to right, transparent, ${currentColorRgb})`,
        }"
      >
        <div
          class="alpha-pointer-horizontal"
          :style="{
            left: `${(alpha / 100) * 100}%`,
          }"
        ></div>
      </div>
    </div>

    <!-- 颜色输入区域 -->
    <div class="color-input-section">
      <!-- 当前颜色预览 -->
      <div class="color-preview">
        <div
          class="preview-color"
          :style="{ backgroundColor: currentColorWithAlpha }"
        ></div>
      </div>

      <!-- 统一格式输入框 -->
      <div class="color-format-input">
        <input
          type="text"
          :value="formatInputValue"
          @input="handleFormatInput"
          class="color-format-text"
          :disabled="disabled"
          :placeholder="getInputPlaceholder()"
          ref="inputRef"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from "vue";

defineOptions({
  name: "ColorPickerPanel",
});

export type ColorFormat = "hex" | "rgb" | "hsv" | "hsl";

export interface ColorObject {
  r: number;
  g: number;
  b: number;
  h: number;
  s: number;
  v: number;
  a?: number;
}

const props = withDefaults(
  defineProps<{
    modelValue?: string;
    border?: boolean;
    disabled?: boolean;
    showAlpha?: boolean;
    colorFormat?: ColorFormat;
  }>(),
  {
    modelValue: "#000000",
    border: true,
    disabled: false,
    showAlpha: false,
    colorFormat: "hex",
  }
);

const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
  (e: "change", value: string): void;
  (e: "color", color: ColorObject): void;
  (e: "update"): void;
}>();

// 颜色值（HSV 格式）
const hsv = ref({ h: 0, s: 0, v: 0 });
// 默认 RGB 值（黑色）
const rgb = ref({ r: 0, g: 0, b: 0 });
const alpha = ref(100); // Alpha 值 0-100
const hexInput = ref("000000");
const alphaInput = ref(100);

// 交互状态
const isDraggingPalette = ref(false);
const isDraggingHue = ref(false);
const isDraggingAlpha = ref(false);

// Refs
const paletteRef = ref<HTMLElement | null>(null);
const hueRef = ref<HTMLElement | null>(null);
const alphaRef = ref<HTMLElement | null>(null);
const inputRef = ref<HTMLInputElement | null>(null);

// 计算属性
const saturation = computed(() => hsv.value.s / 100);
const brightness = computed(() => hsv.value.v / 100);

const currentColorHex = computed(() => {
  return `#${hexInput.value}`;
});

const currentColorRgb = computed(() => {
  return `rgb(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b})`;
});

// 带 Alpha 的当前颜色
const currentColorWithAlpha = computed(() => {
  if (props.showAlpha) {
    return `rgba(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b}, ${alpha.value / 100})`;
  }
  return currentColorHex.value;
});

// 输入框显示的值（根据 colorFormat）
const formatInputValue = computed(() => {
  switch (props.colorFormat) {
    case "rgb":
      return rgbString.value;
    case "hsv":
      return hsvString.value;
    case "hsl":
      return hslString.value;
    case "hex":
    default:
      return hexInput.value ? `#${hexInput.value}` : "";
  }
});

// RGB 字符串
const rgbString = computed(() => {
  if (props.showAlpha) {
    return `rgba(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b}, ${alpha.value / 100})`;
  }
  return `rgb(${rgb.value.r}, ${rgb.value.g}, ${rgb.value.b})`;
});

// HSV 字符串
const hsvString = computed(() => {
  if (props.showAlpha) {
    return `hsva(${hsv.value.h}, ${hsv.value.s}%, ${hsv.value.v}%, ${alpha.value / 100})`;
  }
  return `hsv(${hsv.value.h}, ${hsv.value.s}%, ${hsv.value.v}%)`;
});

// HSL 字符串
const hslString = computed(() => {
  const hsl = rgbToHsl(rgb.value.r, rgb.value.g, rgb.value.b);
  if (props.showAlpha) {
    return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha.value / 100})`;
  }
  return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
});

// 当前颜色对象
const currentColorObject = computed<ColorObject>(() => {
  return {
    r: rgb.value.r,
    g: rgb.value.g,
    b: rgb.value.b,
    h: hsv.value.h,
    s: hsv.value.s,
    v: hsv.value.v,
    ...(props.showAlpha ? { a: alpha.value / 100 } : {}),
  };
});

// HSV 转 RGB
const hsvToRgb = (h: number, s: number, v: number) => {
  s /= 100;
  v /= 100;
  const c = v * s;
  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
  const m = v - c;
  let r = 0,
    g = 0,
    b = 0;

  if (h >= 0 && h < 60) {
    r = c;
    g = x;
    b = 0;
  } else if (h >= 60 && h < 120) {
    r = x;
    g = c;
    b = 0;
  } else if (h >= 120 && h < 180) {
    r = 0;
    g = c;
    b = x;
  } else if (h >= 180 && h < 240) {
    r = 0;
    g = x;
    b = c;
  } else if (h >= 240 && h < 300) {
    r = x;
    g = 0;
    b = c;
  } else if (h >= 300 && h < 360) {
    r = c;
    g = 0;
    b = x;
  }

  r = Math.round((r + m) * 255);
  g = Math.round((g + m) * 255);
  b = Math.round((b + m) * 255);

  return { r, g, b };
};

// RGB 转 HSV
const rgbToHsv = (r: number, g: number, b: number) => {
  r /= 255;
  g /= 255;
  b /= 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const diff = max - min;

  let h = 0;
  if (diff !== 0) {
    if (max === r) {
      h = ((g - b) / diff) % 6;
    } else if (max === g) {
      h = (b - r) / diff + 2;
    } else {
      h = (r - g) / diff + 4;
    }
  }
  h = Math.round(h * 60);
  if (h < 0) h += 360;

  const s = max === 0 ? 0 : Math.round((diff / max) * 100);
  const v = Math.round(max * 100);

  return { h, s, v };
};

// RGB 转 HSL
const rgbToHsl = (r: number, g: number, b: number) => {
  r /= 255;
  g /= 255;
  b /= 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const diff = max - min;

  let h = 0;
  if (diff !== 0) {
    if (max === r) {
      h = ((g - b) / diff) % 6;
    } else if (max === g) {
      h = (b - r) / diff + 2;
    } else {
      h = (r - g) / diff + 4;
    }
  }
  h = Math.round(h * 60);
  if (h < 0) h += 360;

  const l = (max + min) / 2;
  const s = diff === 0 ? 0 : diff / (1 - Math.abs(2 * l - 1));

  return {
    h,
    s: Math.round(s * 100),
    l: Math.round(l * 100),
  };
};

// RGB 转十六进制
const rgbToHex = (r: number, g: number, b: number, includeAlpha = false) => {
  const toHex = (n: number) => {
    const hex = Math.round(n).toString(16);
    return hex.length === 1 ? "0" + hex : hex;
  };
  let hex = `${toHex(r)}${toHex(g)}${toHex(b)}`;
  if (includeAlpha && props.showAlpha) {
    const alphaHex = Math.round((alpha.value / 100) * 255).toString(16).padStart(2, "0");
    hex += alphaHex;
  }
  return hex.toUpperCase();
};

// 十六进制转 RGB
const hexToRgb = (hex: string) => {
  // 支持 #RRGGBB 和 #RRGGBBAA
  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
  if (result) {
    const rgb = {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16),
    };
    if (result[4] && props.showAlpha) {
      alpha.value = Math.round((parseInt(result[4], 16) / 255) * 100);
      alphaInput.value = alpha.value;
    }
    return rgb;
  }
  return { r: 0, g: 0, b: 0 };
};

// 格式化输出颜色
const formatColorOutput = (): string => {
  switch (props.colorFormat) {
    case "rgb":
      return rgbString.value;
    case "hsv":
      return hsvString.value;
    case "hsl":
      return hslString.value;
    case "hex":
    default:
      return `#${hexInput.value}`;
  }
};

// 更新颜色（从 HSV）
const updateColorFromHsv = () => {
  if (props.disabled) return;
  
  const newRgb = hsvToRgb(hsv.value.h, hsv.value.s, hsv.value.v);
  rgb.value = newRgb;
  hexInput.value = rgbToHex(newRgb.r, newRgb.g, newRgb.b, props.showAlpha);
  const colorValue = formatColorOutput();
  emit("update:modelValue", colorValue);
  emit("change", colorValue);
  emit("color", currentColorObject.value);
  emit("update");
};

// 更新颜色（从 RGB）
const updateColorFromRgb = () => {
  if (props.disabled) return;
  
  const newHsv = rgbToHsv(rgb.value.r, rgb.value.g, rgb.value.b);
  hsv.value = newHsv;
  hexInput.value = rgbToHex(rgb.value.r, rgb.value.g, rgb.value.b, props.showAlpha);
  const colorValue = formatColorOutput();
  emit("update:modelValue", colorValue);
  emit("change", colorValue);
  emit("color", currentColorObject.value);
  emit("update");
};

// 更新颜色（从十六进制）
const updateColorFromHex = (hex: string) => {
  if (props.disabled) return;
  
  if (!hex.startsWith("#")) {
    hex = "#" + hex;
  }
  // 支持 #RRGGBB 和 #RRGGBBAA
  if (!/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8}|[A-Fa-f0-9]{4})$/.test(hex)) {
    return;
  }

  // 处理简写形式 #FFF -> #FFFFFF
  if (hex.length === 4) {
    hex =
      "#" +
      hex[1] +
      hex[1] +
      hex[2] +
      hex[2] +
      hex[3] +
      hex[3];
  }
  // 处理带 alpha 的简写 #FFFF -> #FFFFFFFF
  if (hex.length === 5 && props.showAlpha) {
    hex =
      "#" +
      hex[1] +
      hex[1] +
      hex[2] +
      hex[2] +
      hex[3] +
      hex[3] +
      hex[4] +
      hex[4];
  }

  const newRgb = hexToRgb(hex);
  rgb.value = newRgb;
  const newHsv = rgbToHsv(newRgb.r, newRgb.g, newRgb.b);
  hsv.value = newHsv;
  hexInput.value = hex.substring(1).toUpperCase().substring(0, props.showAlpha ? 8 : 6);
  const colorValue = formatColorOutput();
  emit("update:modelValue", colorValue);
  emit("change", colorValue);
  emit("color", currentColorObject.value);
  emit("update");
};

// 色板交互
const handlePaletteMouseDown = (e: MouseEvent) => {
  if (props.disabled) return;
  isDraggingPalette.value = true;
  updatePalettePosition(e);
};


const handlePaletteMouseUp = () => {
  isDraggingPalette.value = false;
};

const updatePalettePosition = (e: MouseEvent) => {
  if (!paletteRef.value) return;
  const rect = paletteRef.value.getBoundingClientRect();
  const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
  const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));

  hsv.value.s = x * 100;
  hsv.value.v = (1 - y) * 100;
  updateColorFromHsv();
};

// 色相条交互
const handleHueMouseDown = (e: MouseEvent) => {
  if (props.disabled) return;
  isDraggingHue.value = true;
  updateHuePosition(e);
};


const handleHueMouseUp = () => {
  isDraggingHue.value = false;
};

const updateHuePosition = (e: MouseEvent) => {
  if (!hueRef.value) return;
  const rect = hueRef.value.getBoundingClientRect();
  // 垂直方向，从上往下（0 在顶部，360 在底部）
  const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
  hsv.value.h = y * 360;
  updateColorFromHsv();
};

// Alpha 滑块交互
const handleAlphaMouseDown = (e: MouseEvent) => {
  if (props.disabled) return;
  isDraggingAlpha.value = true;
  updateAlphaPosition(e);
};


const handleAlphaMouseUp = () => {
  isDraggingAlpha.value = false;
};

  const updateAlphaPosition = (e: MouseEvent) => {
    if (!alphaRef.value) return;
    const rect = alphaRef.value.getBoundingClientRect();
    // 水平方向，从左到右（0 在左边，100 在右边）
    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
    alpha.value = x * 100;
    alphaInput.value = Math.round(alpha.value);
    updateColorFromHsv();
  };


// 获取输入框占位符
const getInputPlaceholder = (): string => {
  switch (props.colorFormat) {
    case "rgb":
      return props.showAlpha ? "rgba(0, 0, 0, 1)" : "rgb(0, 0, 0)";
    case "hsv":
      return props.showAlpha ? "hsva(0, 100%, 100%, 1)" : "hsv(0, 100%, 100%)";
    case "hsl":
      return props.showAlpha ? "hsla(0, 100%, 50%, 1)" : "hsl(0, 100%, 50%)";
    case "hex":
    default:
      return props.showAlpha ? "#000000FF" : "#000000";
  }
};

// 格式输入处理（支持所有格式）
const handleFormatInput = (e: Event) => {
  if (props.disabled) return;
  const value = (e.target as HTMLInputElement).value.trim();
  
  if (!value) return;
  
  // 自动检测格式并解析
  initColor(value);
};

// 初始化颜色
const initColor = (color: string) => {
  if (!color) {
    color = "#000000";
  }

  // 解析不同格式的颜色值
  if (color.startsWith("rgb")) {
    // 解析 rgb/rgba
    const matches = color.match(/(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?/);
    if (matches) {
      rgb.value = {
        r: parseInt(matches[1]),
        g: parseInt(matches[2]),
        b: parseInt(matches[3]),
      };
      if (matches[4] && props.showAlpha) {
        alpha.value = parseFloat(matches[4]) * 100;
        alphaInput.value = Math.round(alpha.value);
      }
      const newHsv = rgbToHsv(rgb.value.r, rgb.value.g, rgb.value.b);
      hsv.value = newHsv;
      hexInput.value = rgbToHex(rgb.value.r, rgb.value.g, rgb.value.b, props.showAlpha);
      return;
    }
  } else if (color.startsWith("hsv") || color.startsWith("hsva")) {
    // 解析 hsv/hsva
    const matches = color.match(/(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%(?:\s*,\s*([\d.]+))?/);
    if (matches) {
      hsv.value = {
        h: parseInt(matches[1]),
        s: parseInt(matches[2]),
        v: parseInt(matches[3]),
      };
      if (matches[4] && props.showAlpha) {
        alpha.value = parseFloat(matches[4]) * 100;
        alphaInput.value = Math.round(alpha.value);
      }
      const newRgb = hsvToRgb(hsv.value.h, hsv.value.s, hsv.value.v);
      rgb.value = newRgb;
      hexInput.value = rgbToHex(newRgb.r, newRgb.g, newRgb.b, props.showAlpha);
      return;
    }
  } else if (color.startsWith("hsl") || color.startsWith("hsla")) {
    // 解析 hsl/hsla
    const matches = color.match(/(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%(?:\s*,\s*([\d.]+))?/);
    if (matches) {
      const hsl = {
        h: parseInt(matches[1]),
        s: parseInt(matches[2]) / 100,
        l: parseInt(matches[3]) / 100,
      };
      if (matches[4] && props.showAlpha) {
        alpha.value = parseFloat(matches[4]) * 100;
        alphaInput.value = Math.round(alpha.value);
      }
      // HSL to RGB
      const c = (1 - Math.abs(2 * hsl.l - 1)) * hsl.s;
      const x = c * (1 - Math.abs(((hsl.h / 60) % 2) - 1));
      const m = hsl.l - c / 2;
      let r = 0,
        g = 0,
        b = 0;
      if (hsl.h >= 0 && hsl.h < 60) {
        r = c;
        g = x;
      } else if (hsl.h >= 60 && hsl.h < 120) {
        r = x;
        g = c;
      } else if (hsl.h >= 120 && hsl.h < 180) {
        g = c;
        b = x;
      } else if (hsl.h >= 180 && hsl.h < 240) {
        g = x;
        b = c;
      } else if (hsl.h >= 240 && hsl.h < 300) {
        r = x;
        b = c;
      } else {
        r = c;
        b = x;
      }
      rgb.value = {
        r: Math.round((r + m) * 255),
        g: Math.round((g + m) * 255),
        b: Math.round((b + m) * 255),
      };
      const newHsv = rgbToHsv(rgb.value.r, rgb.value.g, rgb.value.b);
      hsv.value = newHsv;
      hexInput.value = rgbToHex(rgb.value.r, rgb.value.g, rgb.value.b, props.showAlpha);
      return;
    }
  }

  // 默认当作十六进制处理
  if (!color.startsWith("#")) {
    color = "#" + color;
  }
  const newRgb = hexToRgb(color);
  rgb.value = newRgb;
  const newHsv = rgbToHsv(newRgb.r, newRgb.g, newRgb.b);
  hsv.value = newHsv;
  const maxLength = props.showAlpha ? 8 : 6;
  hexInput.value = color.substring(1).toUpperCase().padStart(maxLength, "0");
  // 如果解析十六进制时没有设置 alpha，且 showAlpha 为 true，确保 alpha 为 100（完全不透明）
  if (props.showAlpha && alpha.value === 100 && !color.match(/^#[A-Fa-f0-9]{8}$/)) {
    alpha.value = 100;
    alphaInput.value = 100;
  }
};

// 监听外部颜色变化
watch(
  () => props.modelValue,
  (newColor) => {
    if (newColor && newColor.trim() !== "") {
      const currentValue = formatColorOutput();
      if (newColor.toUpperCase() !== currentValue.toUpperCase()) {
        initColor(newColor);
      }
    } else {
      // 如果没有提供颜色值或为空，初始化默认的黑色
      initColor("#000000");
    }
  },
  { immediate: true }
);

// 暴露方法
defineExpose({
  color: currentColorObject,
  inputRef,
  update: () => {
    emit("update");
  },
});

// 全局鼠标事件监听
const handleGlobalMouseMove = (e: MouseEvent) => {
  if (isDraggingPalette.value) {
    updatePalettePosition(e);
  }
  if (isDraggingHue.value) {
    updateHuePosition(e);
  }
  if (isDraggingAlpha.value) {
    updateAlphaPosition(e);
  }
};

const handleGlobalMouseUp = () => {
  handlePaletteMouseUp();
  handleHueMouseUp();
  handleAlphaMouseUp();
};

onMounted(() => {
  document.addEventListener("mousemove", handleGlobalMouseMove);
  document.addEventListener("mouseup", handleGlobalMouseUp);
  
  // 确保在挂载时初始化默认黑色（如果没有传入有效的颜色值）
  nextTick(() => {
    if (!props.modelValue || props.modelValue.trim() === "") {
      initColor("#000000");
    } else {
      // 即使有传入值，也确保正确初始化
      const currentValue = formatColorOutput();
      if (props.modelValue.toUpperCase() !== currentValue.toUpperCase()) {
        initColor(props.modelValue);
      }
    }
  });
});

onUnmounted(() => {
  document.removeEventListener("mousemove", handleGlobalMouseMove);
  document.removeEventListener("mouseup", handleGlobalMouseUp);
});
</script>

<style scoped>
.color-picker-panel {
  padding: 0;
  box-sizing: border-box;
}

.color-picker-panel.has-border {
  border: 1px solid var(--editor-border-color);
  border-radius: var(--editor-radius-medium);
  padding: 12px;
}

.color-picker-panel.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.color-picker-main {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

/* 色板区域 */
.color-palette {
  position: relative;
  width: 280px;
  height: 180px;
  border-radius: 4px;
  cursor: crosshair;
  overflow: hidden;
}

.color-picker-pointer {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 色相条（垂直） */
.color-hue {
  position: relative;
  width: 12px;
  height: 180px;
  border-radius: 4px;
  cursor: pointer;
  background: linear-gradient(
    to top,
    #ff0000 0%,
    #ffff00 16.66%,
    #00ff00 33.33%,
    #00ffff 50%,
    #0000ff 66.66%,
    #ff00ff 83.33%,
    #ff0000 100%
  );
  border: none;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
}

.color-hue.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.hue-pointer {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Alpha 滑块外层容器 */
.color-alpha-slider {
  position: relative;
  box-sizing: border-box;
  width: 280px;
  height: 12px;
  margin-bottom: 12px;
  background-size: 12px 12px;
  background-position: 0 0, 6px 0, 6px -6px, 0 6px;
  background-image: 
    linear-gradient(45deg, #fff 25%, transparent 25%),
    linear-gradient(135deg, #fff 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #fff 75%),
    linear-gradient(135deg, transparent 75%, #fff 75%);
  background-color: #d3d3d3;
  border-radius: 4px;
  overflow: hidden;
}

/* Alpha 滑块内部颜色渐变 */
.color-alpha-horizontal {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
}

.color-alpha-horizontal.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.alpha-pointer-horizontal {
  position: absolute;
  top: 0;
  height: 100%;
  width: 4px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%);
  pointer-events: none;
}

/* 颜色输入区域 */
.color-input-section {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--editor-border-color);
  width: 280px;
}

.color-preview {
  width: 32px;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--editor-border-color);
  overflow: hidden;
  flex-shrink: 0;
  align-self: stretch;
}

.preview-color {
  width: 100%;
  height: 100%;
}

/* 颜色格式输入 */
.color-format-input {
  flex: 1;
}

.color-format-text {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--editor-border-color);
  border-radius: 4px;
  font-size: 12px;
  font-family: monospace;
  background: var(--editor-color-white);
  color: var(--editor-text-color);
}

.color-format-text:focus {
  outline: none;
  border-color: var(--editor-primary-color);
}

.color-format-text:disabled {
  background: var(--editor-background-color-disabled);
  cursor: not-allowed;
}

.color-format-text::placeholder {
  color: var(--editor-text-color-disabled);
}

.color-palette.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>

